import React, { Component } from 'react';
import './Bottom.css'
class Bottom extends Component {
    constructor(props) {
        super(props)
        console.log(props.searchlist);
        this.state = {
            songs:props.song,
            searchlist:props.searchlist
        }
    }
    componentWillReceiveProps(nextProps){
        console.log(nextProps);
        this.setState(state=>{
            return{
                songs:nextProps.song,
                searchlist:nextProps.searchlist
            }
        })
    }
    render() {
        return (
            <div className="bottoms">
                {this.state.songs.artists? (
                    <div className="singers">
                        <h3>相关歌手</h3>
                        {this.state.songs.artists ? this.state.songs.artists.map((item,index)=>{
                    return(
                        <div key={index}>
                            <img src={item.picUrl} alt="" />
                            <span>歌手:{item.name}</span>
                        </div>
                    )
                }):null}
                    </div>
                    ) : null
                }
                
                {this.state.songs.playlists? (
                    <div className="songlist">
                        <h3>相关歌单</h3>
                        {this.state.songs.playlists ? this.state.songs.playlists.map((item1,index1)=>{
                        return(
                            <div key={index1}>
                                <img src={item1.coverImgUrl} alt="" />
                                <span>歌单：{item1.name}</span>
                            </div>
                        )
                        }):null}
                    </div>) : null}
                {this.state.searchlist? (
                        <div className="itemlist">
                        {this.state.searchlist ? this.state.searchlist.map((item2,index2)=>{
                            return(
                                <div key={index2}>
                                    <h2>{item2.name}</h2>
                                    <span>{item2.artists[0].name}-{item2.album.name}</span>
                                </div>
                            )
                        }):null}
                    </div>
                    ):null}
            </div>
        );
    }
}

export default Bottom;